<template>
  <vxe-modal
    resize
    esc-closable
    showFooter
    width="55%"
    height="80%"
    v-model="formVisible"
    @hide="formClose"
    :loading="formLoading"
  >
    <template slot="title">
      <span>用户信息表单</span>
    </template>
    <template>
      <el-scrollbar class="scrollbar-handle">
        <vxe-form
          ref="firstForm"
          title-width="100"
          title-align="right"
          :data="formEntity"
          :rules="rules"
          span="12"
        >
          <vxe-form-item
            title="用户账号"
            field="B_Account"
            v-show="pwdAccVisible"
            :title-suffix="{
              message: '账号不能重复！',
              icon: 'fa fa-exclamation-circle',
            }"
          >
            <el-input
              v-model="formEntity.B_Account"
              placeholder="请输入"
              clearable
            ></el-input>
          </vxe-form-item>
          <vxe-form-item
            title="用户密码"
            field="B_Password"
            v-show="pwdAccVisible"
          >
            <el-input
              v-model="formEntity.B_Password"
              placeholder="请输入"
              clearable
              show-password
            ></el-input>
          </vxe-form-item>
          <vxe-form-item title="所属部门">
            <rayd-select :options="depTreeList" v-model="formEntity.B_DepartmentId" tree-config/>
          </vxe-form-item>
          <vxe-form-item title="用户性别">
            <rayd-select options="Gender" v-model="formEntity.B_Gender"></rayd-select>
          </vxe-form-item>
          <vxe-form-item title="用户名称" field="B_RealName">
            <el-input
              v-model="formEntity.B_RealName"
              placeholder="请输入"
              clearable
            ></el-input>
          </vxe-form-item>
          <vxe-form-item
            title="用户工号"
            field="B_EnCode"
            :title-suffix="{
              message: '工号不能重复！',
              icon: 'fa fa-exclamation-circle',
            }"
          >
            <el-input
              v-model="formEntity.B_EnCode"
              placeholder="请输入"
              clearable
            ></el-input>
          </vxe-form-item>
          <vxe-form-item title="邮箱" field="B_Email">
            <el-input
              v-model="formEntity.B_Email"
              placeholder="请输入"
              clearable
            ></el-input>
          </vxe-form-item>
          <vxe-form-item title="手机" field="B_Mobile">
            <el-input
              v-model="formEntity.B_Mobile"
              placeholder="请输入"
              clearable
            ></el-input>
          </vxe-form-item>
          <vxe-form-item title="QQ" field="B_OICQ">
            <el-input
              v-model="formEntity.B_OICQ"
              placeholder="请输入"
              clearable
            ></el-input>
          </vxe-form-item>
          <vxe-form-item title="微信" field="B_WeChat">
            <el-input
              v-model="formEntity.B_WeChat"
              placeholder="请输入"
              clearable
            ></el-input>
          </vxe-form-item>
          <vxe-form-item title="生日" span="24">
            <rayd-date-picker
              v-model="formEntity.B_Birthday"
              type="date"
            ></rayd-date-picker>
          </vxe-form-item>
          <vxe-form-item title="用户描述" field="B_Description" span="24">
            <el-input
              type="textarea"
              :autosize="{ minRows: 4, maxRows: 4 }"
              maxlength="50"
              show-word-limit
              placeholder="请输入"
              clearable
              v-model="formEntity.B_Description"
            ></el-input>
          </vxe-form-item>
        </vxe-form>
      </el-scrollbar>
    </template>
    <template slot="footer">
      <el-button type="primary" v-form-validate="formSubmit">保存</el-button>
      <el-button @click="formVisible = false">取消</el-button>
    </template>
  </vxe-modal>
</template>

<script> 
import { User } from "@/api";
export default {
  name: "Form",
  props: {
    //组织架构主键
    manaId: {
      type: String,
      required: true,
    },
    //部门树型数据
    depTreeList: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      /* 实体数据 */
      genderList: this.util.getDataItemList("Gender"), //性别数据（数据字典）
      //存放表单ref数组
      formArr: ["firstForm"],
      //表单可见
      formVisible: false,
      //表单加载中
      formLoading: false,
      //表单实体
      formEntity: {},
      //表单验证规则（规则键必须和表单键一致）
      rules: {
        B_Email: [
          {
            pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
            message: "请输入正确的邮箱地址",
          },
        ],
        B_Account: [
          {
            required: true,
            validator: ({ itemValue, property }) => {
              return new Promise((resolve, reject) => {
                if (this.util.validateNull(itemValue)) {
                  reject(new Error("不能为空！"));
                } else {
                  User.ValidateExist({
                    id: this.formEntity.B_UserId,
                    field: property,
                    value: itemValue,
                  })
                    .then((res) => {
                      resolve();
                    })
                    .catch((err) => {
                      reject(new Error("账号已存在！"));
                    });
                }
              });
            },
          },
        ],
        B_Password: [{ required: true, min: 4, message: "最少4个字符" }],
        B_RealName: [{ required: true, message: "不能为空" }],
        B_EnCode: [
          {
            required: true,
            validator: ({ itemValue, property }) => {
              return new Promise((resolve, reject) => {
                if (this.util.validateNull(itemValue)) {
                  reject(new Error("不能为空！"));
                } else {
                  User.ValidateExist({
                    id: this.formEntity.B_UserId,
                    field: property,
                    value: itemValue,
                  })
                    .then((res) => {
                      resolve();
                    })
                    .catch((err) => {
                      reject(new Error("工号已存在！"));
                    });
                }
              });
            },
          },
        ],
      },

      pwdAccVisible: true, //表单元素是否显示
    };
  },
  created() {
    //初始化
    this.init();
  },
  methods: {
    //初始化
    init() {},
    //表单开启
    formOpen(row) {
      if (!row) {
        //新增
      } else {
        //编辑
        this.formEntity = JSON.parse(JSON.stringify(row));
      }
      //表单元素是否显示
      this.pwdAccVisible = !row;
      //打开表单
      this.formVisible = true;
    },
    //表单提交
    formSubmit() {
          //所属组织架构
          this.formEntity.B_ManaframeId = this.manaId;
          //密码 转 MD5 32位 小写
          this.formEntity.B_Password = this.util.md5(this.formEntity.B_Password);
          //验证通过
          User.Save(this.formEntity).then((res) => {
            this.formVisible = false; //关闭弹窗
            this.$emit("refresh"); //刷新表格
          });
    },
    //表单关闭
    formClose() {
      //清除表单验证
      this.util.formClearValid(this.formArr);
      //数据归位
      Object.assign(this.$data, this.$options.data.call(this))
    },
  },
};
</script>

<style lang="less" scoped>
</style>